<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    /* 给对应的class设置一些样式属性 */
    .basic {
        width: 400px;
        height: 100px;
        background-color: red;
    }

    .happy {
        width: 400px;
        height: 100px;
        background-color: orange;
    }

    .normal {
        width: 400px;
        height: 100px;
        background-color: green;
    }

    .radiusStyle {
        border-radius: 50%;
    }
</style>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <h1>动态的给标签添加设定class属性的值</h1>

        <!-- :class 绑定class字符串写法, 浏览器上查看标签源码就能明白了 -->
        <!-- 适用于场景：类名不确定需要动态获取 -->
        <div class="basic" :class="mood" @click="changeMod">{{name}}</div>

        <br>

        <!-- :class 绑定class数组的写法 -->
        <!-- 适用于场景：要绑定多个样式，个数不确定，名字也不确定 -->
        <div :class="arr">{{name}}</div>

        <br>

        <!-- :class 绑定class对象的写法 -->
        <!-- 适用于场景：要绑定多个样式，个数确定，名字也确定，但不确定用不用 -->
        <div class="basic" :class="obj">{{name}}</div>

        <!-- 不是绑定class，而是直接绑定了样式style，直接给到标签里样式 
            :style 比如给设置字体大小，可以绑定个对象，浏览器上查看标签源码就能明白了 -->
        <div class="basic" :style="styleObj">{{name}}</div>



    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            name: "aBiu",
            mood: 'happy',  // 给默认值
            arr: ['happy', 'radiusStyle'],
            obj: {
                happy: false,
                radiusStyle: true
            },
            styleObj: {
                fontSize: '100px',
                color: 'white',     // 字体白色
            },
        },
        methods: {
            changeMod() {
                this.mood = 'normal'
            }
        },

    })
</script>

</html>